﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
	<script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/data-generator.js" type="text/javascript"></script>
    <script src="js/jquery.mockjax.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">Ajax</li>
        </ul>
        <div class="alert">
            Change your table data using AJAX and then reinitialize your FooTable.
        </div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#demo">Demo</a></li>
			<li><a href="#docs">Docs</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="demo">
                <p><a href="#" class="get_data">Load more data via ajax</a></p>
<table id="modality" class="table table-hover footable">
<thead>
<tr>
<th width="40%">Modality</th>
<th data-hide="phone" width="30%">A</th>
<th data-hide="tablet,phone" width="30%">B</th>
</tr>
</thead>
<tbody></tbody>
</table>
			</div>
			<div class="tab-pane" id="docs">
                <h4>Refresh After Populating By Ajax</h4>
                <p>You can easily tell Footable to redraw by triggering the <code>footable_redraw</code> event on the table:
                    <pre>$(&#39;.get_data&#39;).click(function() {
	$.ajax({
		url : &#39;/some/api&#39;,
		success : function(data) {
			$(&#39;table tbody&#39;).append(data).trigger(&#39;footable_redraw&#39;);
		}
	});
});</pre>
                </p>
			</div>
		</div>
	</div>
    <script type="text/javascript">
        $.mockjax({
          url: '/some/api',
          dataType: 'json',
          responseText: [ 
            {"id" : 30, "name" : "Corrida"}, 
            {"id" : 31, "name" : "Mountain Bike"} 
          ]
        });

        $(function () {

          var footable = $('#modality').footable().data('footable');

          $('.get_data').click(function() {
            $.ajax({
                url : '/some/api',
                dataType : 'json',
                success : function(result) {
                    $.each(result, function(idx, obj) {
                        var row = '<tr>';
                        $.each(obj, function(key, value) {
                            if (key != 'id') {
                                row += '<td>' + value + '</td>';
                            }
                        });
                        row += '<td>Edit</td>';
                        row += '<td>Remove</td>';
                        row += '</tr>';
                        footable.appendRow(row);
                    });
                    footable.redraw();
                }
            });
          }).click();
        });
    </script>
</body>
</html>
